<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left">录屏取证</div>
    </div>
    <div class="ci_note">
      <Description-block data="录屏取证" />
    </div>
    <div class="ci_des">
      <div class="title_personal">录屏取证</div>
    </div>
    <div class="ci_des">
      <el-form
        style="width: 100%"
        label-position="right"
        ref="codeForm"
        label-width="120px"
        :model="form"
        :rules="rules"
      >
        <el-form-item label="证据名称：" prop="name">
          <el-input
            v-model.trim="form.name"
            placeholder="请输入证据名称(50个字符以内)"
          ></el-input>
        </el-form-item>
        <el-form-item label="网址：" prop="src">
          <el-input
            v-model.trim="form.src"
            placeholder="请输入以https://或http://开头的规范网址(100个字符以内)"
          ></el-input>
          <!-- <el-button :disabled="!form.src" @click="openNewPage"
            >打开网址</el-button
          >
          <p>打开网址后请返回此页面点击录制页面</p> -->
        </el-form-item>
        <el-form-item label="证据介绍：" prop="note">
          <el-input
            v-model.trim="form.note"
            placeholder="请输入取证介绍(150个字符以内)"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <video
            v-if="videoURL"
            autoplay
            controls
            playsinline
            :src="videoURL"
            style="width: 80%; background: green"
            id="player"
          ></video>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="isLoading">保存</el-button>
          <el-button type="primary" @click="recordScreen">
            {{ videoURL ? "重新录制" : "录制视频" }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addEvidenceObtainVideo } from "@/api/obtainEvidence";
import { ElMessage } from "element-plus";
import { DescriptionBlock } from "../../components/index";
export default {
  name: "Record Screen",
  data: () => {
    return {
      form: {
        src: "",
        name: "",
        note: "",
      },
      file: new FormData(),
      isLoading:false,
      videoURL: "",
      codeFormRef: "form",
      rules: {
        src: [
          { required: true, message: "请输入录屏网址", trigger: "blur" },
          {
            pattern:
            /(http|https):\/\/([\w.]+\/?)\S*/ig,
            message: "请输入以https://或http://开头的规范网址(100个字符以内)",
            trigger: "blur",
            max: 100,
          },
        ],
        name: [
          {
            required: true,
            message: "请输入证据名称(50个字符以内)",
            trigger: "blur",
          },
          { max: 50, message: "请输入证据名称(50个字符以内)", trigger: "blur" },
        ],
        note: [
          {
            max: 150,
            message: "请输入取证介绍,(150个字符以内)",
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: { DescriptionBlock },
  props: {
    msg: String,
  },
  methods: {
    openNewPage() {
      window.open(this.form.src, "_blank");
    },
    recordScreen() {
      navigator.mediaDevices
        .getDisplayMedia({
          video: true,
          audio: false,
        })
        .then((stream) => {
          this.startRecording(stream);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    startRecording(stream) {
      // 确认当前环境所支持的屏幕录制文件类型
      const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
        ? "video/webm; codecs=vp9"
        : "video/webm";

      const mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime,
      });
      mediaRecorder.start();
      console.log("after recorder start------", stream);
      const chunks = [];
      mediaRecorder.addEventListener("dataavailable", function (e) {
        chunks.push(e.data);
        console.log("recorder chunks------", chunks);
      });
      mediaRecorder.addEventListener("stop", () => {
        const blob = new Blob(chunks, {
          type: chunks[0].type,
        });
        console.log("recorder stop------", blob);
        const videoFile = new File([blob], ".mp4", { type: "video/mp4" });
        this.file = videoFile;
        // 获取 可用的 url
        console.log(blob);
        const videoURL = URL.createObjectURL(blob);
        console.log(videoURL);
        this.videoURL = videoURL;
      });
    },
    onSubmit() {
      let parmars = {
        evidenceName: this.form.name,
        obtainUrl: this.form.src,
        description: this.form.note,
        file: this.file,
      };
      if (!this.videoURL) {
        ElMessage.error("请录制视频！");
        return;
      }
      this.$refs.codeForm.validate(async (valid) => {
        if (valid) {
          this.isLoading = true;
          addEvidenceObtainVideo(parmars)
            .then((res) => {
              if (res.success) {
                // ElMessage.success(res.message);
                this.isLoading = false;
                this.$router.push({ path: "/EbtainEvidence/Evidence" });
              } else {
                ElMessage.error(res.msg || "录屏取证失败!");
                this.isLoading = false;
              }
            })
            .catch((err) => {
              ElMessage.error(err.msg || "录屏取证失败!");
              this.isLoading = false;
              // this.$router.push({ path: "/EbtainEvidence/Evidence" });
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/list.scss";
@import "../../assets/css/position.scss";

.content_index {
  :deep.el-input {
    width: 90%;
    max-width: 400px;
  }
  :deep .iconfont__header_icon {
    width: 16px;
    margin-top: 8px;
  }
  .title_personal {
    font-size: 16px;
    font-weight: 700;
  }
}
.content_index {
  :deep.el-select {
    width: 95%;
    border-radius: 0;

    :deep .el-input {
      width: 95%;
      border-radius: 0 !important;
    }
    .el-input__suffix {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border-radius: 0;
      font-size: 12px;
    }
  }
}

.aitem {
  cursor: pointer;
  color: #2186fb;
}

.nodata_tips {
  margin-left: 5px;
  color: #2186fb;
  cursor: pointer;
}
</style>
